<script>

import TopCeilingLogin from "@/views/home/components/TopCeilingLogin.vue";
import {drop_down} from "@/API/http";


export default {
  name: "TopCeiling",
  components: {TopCeilingLogin},
  computed:{
    visible:state=>state.visible,
  },
  data() {
    return {
      CourseList: [],

      // 下拉框参数
      drop:{
        enable:1
      }
    }
  },

  methods: {
    onSearch(value) {
      console.log(value);
    },
  },

  created() {
    drop_down(this.drop).then(res => {
      this.CourseList = res.rows;
    })

  },

}
</script>

<template>
  <div class="TOP">
    <div class="w">
      <div class="ceilingBox">
        <div>
          <img src="@/assets/吸顶.png" alt="">
        </div>
        <div>
          <ul>
            <li> <router-link to="/" style="color: black">首页</router-link> </li>
            <li>  <!--下拉框-->
              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="color: #0f141a">
                  课程分类
                </a>
                <a-menu slot="overlay">
                  <a-menu-item v-for="item in CourseList" :key="item.subjectId">
                    <a href="javascript:;">{{ item.subjectTitle }}</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-icon type="down"/>
            </li>
            <li>教学管理云平台</li>
          </ul>
        </div>
        <div style="margin-left:auto;">
          <a-input-search  placeholder="搜索课程" enter-button @search="onSearch" size="large"/>
        </div>
        <!--      购物车-->
        <div class="shopIcon">
          <img src="@/assets/shop==.png">
        </div>

            <TopCeilingLogin>

          </TopCeilingLogin>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.TOP{
  background: white;
}
.w {
  width: 1200px;
  margin: 0 auto;
}

:deep(ul) {
  margin: 0;
  align-items: center;
  display: flex;
  list-style: none;

  li {
    margin: 0 15px;
    font-weight: bold;
    color: #0f141a;
  }
}

.ceilingBox {
  padding: 25px;
  align-items: center;
  display: flex;
}

//购物车
.shopIcon {
  padding: 20px;
  margin: 0 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 30px;
  height: 30px;
  //border: 1px solid black;
  box-shadow: 0px 0px 5px gray;
  border-radius: 50%;
  background-color: white;
}

//登录注册按钮

.loginBox {
  box-shadow: 0px 0px 5px gray;
  padding: 5px;
  font-size: 18px;
  font-weight: bold;
  color: black !important;
  overflow: hidden;
  background-color: white;
  border-radius: 20px;
  cursor: pointer
}
:deep(.ant-input-group-addon){
  background-color:#00b278 !important;
}
:deep(.ant-btn-primary){
  width: 60px;
  background-color: #00b278 !important;
}
:deep(.ant-input){
width: 250px !important;
}






</style>